<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<body>
<video controls="" src="blob:http://nickdesaulniers.github.io/4f395b1c-9bdf-4d24-be2a-6bbf642e18c8"></video>
<script>
    var video = document.querySelector('video');

    var assetURL = 'http://vjs.zencdn.net/v/oceans.mp4';
    // Need to be specific for Blink regarding codecs
    // ./mp4info frag_bunny.mp4 | grep Codec
    var mimeCodec = 'video/mp4; codecs="avc1.42E01E, mp4a.40.2"';

    if ('MediaSource' in window && MediaSource.isTypeSupported(mimeCodec)) {
        var mediaSource = new MediaSource;
        //console.log(mediaSource.readyState); // closed
        video.src = URL.createObjectURL(mediaSource);
        mediaSource.addEventListener('sourceopen', sourceOpen);
    } else {
        console.error('Unsupported MIME type or codec: ', mimeCodec);
    }

    function sourceOpen (_) {
        //console.log(this.readyState); // open
        var mediaSource = this;
        var sourceBuffer = mediaSource.addSourceBuffer(mimeCodec);
        return;
        fetchAB(assetURL, function (buf) {
            sourceBuffer.addEventListener('updateend', function (_) {
                console.log(assetURL);
                mediaSource.endOfStream();
                video.play();
                //console.log(mediaSource.readyState); // ended
            });
            sourceBuffer.appendBuffer(buf);
        });
    };

    function fetchAB (url, cb) {
        var xhr = new XMLHttpRequest;
        xhr.open('get', url);
        xhr.responseType = 'arraybuffer';
        xhr.onload = function () {
            cb(xhr.response);
        };
        xhr.send();
    };
</script>



<audio controls="controls" style="display: none;"></audio></body>
</body>
</html>
